<%@ page language="java" contentType="text/html; charset=UTF-8"
	pageEncoding="UTF-8"%>
<%@include file="/WEB-INF/include/base.jsp"%>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html lang="en">
<head>
<link rel="shortcut icon" href="img/favicon.png"/>

<script  type="text/javascript"	src="static/js/pageComm.js"></script>
<script  type="text/javascript"	src="static/js/pageListComm.js"></script>
<script type="text/javascript">
	$(function(){
		
		
		$("#personModal").modal({
			backdrop: "static"
		});
		 
		$("#queryUsers").click(function(){
			
			//清空模态框中的数据
			reset_form("#personModal");
			
			//查询所有的部门 并显示在select框里面
			queryDept();
			$("#personModal").modal({
				backdrop: "static"
			});
		});
		
		//根据所输入的信息查询信息
		$("#queryPerson").click(function(){
			to_page(1);
			
		});
		
		
	});
	
	function checkPersonId(){
		var personId=$("#personId input").val();
		var regId=/^[0-9]{1,18}$/;
		if(!regId.test(personId) && (personId !=null && personId !="")){
			$("#personId").addClass("has-error");
			$("#personId span").html("请输入正确的id，ID必须为数字");
			return false;
		}else{
			$("#personId").removeClass("has-error");
			$("#personId span").html("");
			return true;
		}
		
	}
	
	
	function to_page(pn){
		//判断数据是否符合要求  id是否为数字
		if(!checkPersonId()){
			return false;
		}
		
		$.ajax({
			url:"${APP_PATH}/queryPerson/"+pn,
			data:$("#queryTable").serialize(),
			success:function(result){
				 if(result.code == 200){
					 //显示失败消息  失败
					alert(result.extend.msg);
					 //关闭模态框
				}else{
					//2. 解析并显示分页数据
	 				  build_page_info(result);
	 				 //3解析显示分页条
	 				  build_page_nav(result);
	 				 
	      				//1. 解析并显示员工数据
	 				 build_emps_table(result);
				}
				
      				
      			//4关闭模态框
 				$("#personModal").modal("hide");
      			
			}
		});
	}
	
	//1. 解析并显示员工数据
		function build_emps_table(result){
			//清空table表格
	  		$("#queryPersonTable tbody").empty();
			//获取返回的dept值
			var person=result.extend.pageInfo.list;
			
			$.each(person,function(index,item){
				//alert(index+"   "+item.username);
				var idTd=$("<td></td>").append(item.id);
				var personNameTd=$("<td></td>").append(item.username);
				var personPasswordTd=$("<td></td>").append(item.password);
				var deptNameTd=$("<td></td>").append(item.department.deptName); 
				var userTypeTd=$("<td></td>").append(item.userType == '0'?"管理员":"普通员工");
				var userTelephone=$("<td></td>").append(item.userTelephone);
				var userEmail=$("<td></td>").append(item.userEmail);
				var userPhone=$("<td></td>").append(item.userPhone);
				var userFax=$("<td></td>").append(item.userFax);
				var userRemark=$("<td></td>").append(item.userRemark);
				
				
				$("<tr></tr>").append(idTd)
							  .append(personNameTd)
							  .append(personPasswordTd)
							  .append(deptNameTd)
							  .append(userTypeTd) 
							  .append(userTelephone)
							  .append(userEmail)
							  .append(userPhone)
							  .append(userFax)
							  .append(userRemark)
							  .appendTo($("#queryPersonTable tbody"));
				//alert(index);
			});
		//	alert("endddd");
	  	}
		 
		$(document).on("click",".personInfo",function(){
			var personId=$(this).attr("personId");
			window.location.href="person/"+personId+"?target=person-info";
		});
	
	
	//查询所有的部门 并显示在select框里面
	function queryDept(){
		$.ajax({
			url:"${APP_PATH}/deptGroup",
			type:"GET",
			success:function(result){
				$("#deptSelect").empty();
				//添加一个空白的
				$("#deptSelect").append($("<option></option>"));
				$.each(result.extend.list,function(index,item){
					$("#deptSelect").append($("<option></option>")
							.val(item.id)
							.html(item.deptName));
				});
			}
		})
		
		
	}

</script>

</head>


  <body>
  <!-- 导入模态框 -->
  <%@include file="/WEB-INF/include/personQueryModal.jsp"%>
  
  <!-- container section start -->
  <section id="container" class="">
      <%@include file="/WEB-INF/include/top.jsp"%>

      <%@include file="/WEB-INF/include/left.jsp"%>

      <!--main content start-->
      <section id="main-content" >
          <section class="wrapper">
		  <div class="row">
				<div class="col-lg-12">
					<ol class="breadcrumb">
						<li><i class="fa fa-home"></i><a href="index.jsp">人员管理</a></li>
						<li><i class="fa fa-table"></i>查询结果列表</li>  
					</ol>
					
				
				</div>
			</div>
	          
             
            <button id="queryUsers" type="button" class="btn btn-default  btn-block">查    询</button>
            
              <div class="row" align="center" style="margin:0 auto">
                  <div class="col-lg-12">
                      <section class="panel">
                        
                          <table class="table table-striped table-advance table-hover" id="queryPersonTable">
                          <thead align="center">
                           <tr >
                              
                              <th width="88px" style="text-align: center;">ID</th>
				<th width="118px" style="text-align: center;">姓名</th>
				<th width="108px" style="text-align: center;">密码</th>
				<th width="128px" style="text-align: center;">所属部门</th>
				<th width="128px" style="text-align: center;">人员类型</th>
				<th width="118px" style="text-align: center;">电话</th>
				<th width="118px" style="text-align: center;">电子邮件</th>
				<th width="118px" style="text-align: center;">手机</th>
				<th width="168px" style="text-align: center;">传真</th>
				<th width="118px" style="text-align: center;">备注</th>
                                
                          
                              </tr>
                          </thead>
                          		
                       
                          
                           <tbody align="center" >
                           </tbody>
                           <tfoot>
                           		<tr>
                           			<td colspan="10">
                           			
       <div class="row " >
				<!--分页文字信息  -->
				<div class="col-md-6" id="page_info_area"></div>
				<!-- 分页条信息 -->
				<div class="col-md-6" id="page_nav_area" >
				</div>
		</div>
                           			</td>
                           		</tr>
                           	
                           	
                           </tfoot>
                        </table>
                      </section>
                  </div>
              </div>
          </section>
      </section>
      <!--main content end-->
  </section>
  <!-- container section end -->
    <!-- javascripts -->
    <script src="js/jquery.js"></script>
    <script src="js/bootstrap.min.js"></script>
    <!-- nicescroll -->
    <script src="js/jquery.scrollTo.min.js"></script>
    <script src="js/jquery.nicescroll.js" type="text/javascript"></script>
    <!--custome script for all page-->
    <script src="js/scripts.js"></script>


  </body>
</html>
